<script setup>
import { delFont, fontList, setFontDefault } from '@/api/graph.js'
import { Message } from '@arco-design/web-vue'
import { getSense } from '@/utils/dict.js'
import EditFont from '@/views/font-admin/components/edit-font.vue'
import { reactive, onMounted, ref } from 'vue'
const colorList = ['#6a2c70', '#00adb5', '#393e46', '#b83b5e', '#f08a5d', '#f9ed69', '#95e1d3']
const EditFontRef = ref()
const fontConfig = reactive({
  fontList: [],
  senseCode: 'K75LFN',
  fontName: null
})
const handleDelFont = async (item) => {
  await delFont(item.id)
  Message.success('删除成功')
  await getList()
}
const handleSetFontDefault = async (item) => {
  const senseCode = getSense('IOT_CANVAS_FONT_DEFINE_TABLE_DEFAULT')
  const params = {
    senseCode: senseCode,
    serviceName: 'add',
    formFields: [{
      K: 'id',
      V: item.id
    }]
  }
  await setFontDefault(params)
  Message.success('设置成功')
  await getList()
}
const getList = async () => {
  const params = {
    pageSize: paginationProps.pageSize,
    pageIndex: paginationProps.current,
    senseCode: fontConfig.senseCode,
    searchFields: [{ K: 'name', V: fontConfig.fontName }]
  }
  const { data } = await fontList(params)
  fontConfig.fontList = data.rows
  paginationProps.total = data.total
}
const getColor = (index) => {
  return colorList[index % colorList.length]
}
onMounted(async () => {
  await getList()
})
const handleClickEditFont = () => {
  EditFontRef.value.init()
}
const handleSuccess = async () => {
  paginationProps.pageIndex = 1
  await getList()
}
const paginationProps = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})
</script>

<template>
  <div class="font-admin p-8">
    <EditFont ref="EditFontRef" @on-success="handleSuccess"></EditFont>
    <div class="title flex items-center mb-4">
      <h2 class="font-bold text-[20px]">我的字体</h2>
      <a-space class="ml-auto" size="large">
        <a-input-search
          placeholder="字体名称"
          v-model="fontConfig.fontName"
          @search="getList"
        >
        </a-input-search>
        <a-button type="primary" @click="handleClickEditFont">新建字体</a-button>
      </a-space>
    </div>
    <a-list class="bg-white p-4 rounded-md" :bordered="false" :data="fontConfig.fontList" :pagination-props="paginationProps" @page-change="getList" @page-size-change="getList">
      <template #item="{ item, index }">
        <a-list-item >
          <a-list-item-meta
            :title="item.fontName"
            :description="item.isDefault === '1' ? '默认字体' : ''"
          >
            <template #avatar>
              <a-avatar shape="square" :style="{backgroundColor: getColor(index)}">
                {{item.fontName[0]}}
              </a-avatar>
            </template>
          </a-list-item-meta>
          <template #actions>
            <a-button type="text" size="mini" @click="handleSetFontDefault(item)" v-if="item.isDefault === '2'">
              设为默认
            </a-button>
            <a-popconfirm
              content="确定删除当前字体吗?"
              type="warning"
              ok-text="删除"
              position="br"
              @ok="handleDelFont(item)"
            >
              <a-button type="text" size="mini" v-if="item.isDefault === '2'">
               删除
              </a-button>
            </a-popconfirm>
          </template>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
